<template>
  <div class="search page">
    <div style="margin-bottom: 15px;">
      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item label="药品名称:">
          <el-input v-model="searchInfo.name" placeholder="请输入药名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="initPage()"><i class="el-icon-search"></i> 查询</el-button>
          <el-button type="success" @click="updateFlag = true">新增药品信息</el-button>
          <el-button type="danger" @click="deleteItem(null)">批量删除</el-button>
          <el-button type="warning" @click="reviewData()">恢复数据</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table @select="(item) => {selection = item;}" :data="list" center border style="width: 100%;min-height: 60vh;margin-bottom: 15px;">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="药名" prop="name" width="200"></el-table-column>
      <el-table-column label="属性" prop="properties" width="300"></el-table-column>
      <el-table-column label="使用" width="600">
        <template slot-scope="scope">
           <span class="show">{{scope.row.usageAndDosage.length == 0 ? '尚不明确' : scope.row.usageAndDosage}}</span>
        </template>
      </el-table-column>
      <el-table-column label="注意" width="330">
        <template slot-scope="scope">
          <span class="show">{{scope.row.specialPopulationMedication.length == 0 ? '尚不明确' : scope.row.specialPopulationMedication}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <div>
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="openUpdate(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteItem(scope.row.id)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex;justify-content: flex-end;align-items: center;">
      <el-pagination :total="total" :page-size="searchInfo.limit" @current-change="currentChange" @size-change="handleSizeChange"
                     background layout="sizes,prev,pager,next,jumper"></el-pagination>
    </div>

    <el-drawer :title="isUpdate ? '修改药品信息' : '新增药品信息'" :visible.sync="updateFlag" direction="rtl" @close="handleClose" size="50%">
      <el-form ref="form" :model="pharmacyInfo" label-width="100px" style="padding:30px;">
        <el-form-item label="药品名称">
          <el-input v-model="pharmacyInfo.name" placeholder="请输入药品名称"></el-input>
        </el-form-item>
        <el-form-item label="性状">
          <el-input v-model="pharmacyInfo.properties" type="textarea" placeholder="请输入药品性状"></el-input>
        </el-form-item>
        <el-form-item label="用法用量">
          <el-input v-model="pharmacyInfo.usageAndDosage" type="textarea" placeholder="请输入药品的用法用量"></el-input>
        </el-form-item>
        <el-form-item label="药品详细名称">
          <el-input v-model="pharmacyInfo.drugName" type="textarea" placeholder="请输入药品的详细名称"></el-input>
        </el-form-item>
        <el-form-item label="特殊人群用药">
          <el-input v-model="pharmacyInfo.specialPopulationMedication" type="textarea" placeholder="特殊人群用药信息"></el-input>
        </el-form-item>
        <el-form-item label="药物相互作用">
          <el-input v-model="pharmacyInfo.drugInteractions" type="textarea" placeholder="药物相互作用信息"></el-input>
        </el-form-item>
        <el-form-item label="不良反应">
          <el-input v-model="pharmacyInfo.adverseReactions" type="textarea" placeholder="药物相互作用信息"></el-input>
        </el-form-item>
        <el-form-item label="成分">
          <el-input v-model="pharmacyInfo.component" type="textarea" placeholder="药品成分信息"></el-input>
        </el-form-item>
        <el-form-item label="禁忌">
          <el-input v-model="pharmacyInfo.taboo" type="textarea" placeholder="药品禁忌信息"></el-input>
        </el-form-item>
        <el-form-item label="药理作用">
          <el-input v-model="pharmacyInfo.pharmacologicalAction" type="textarea" placeholder="药理作用信息"></el-input>
        </el-form-item>
        <el-form-item label="适用性">
          <el-input v-model="pharmacyInfo.adaptability" type="textarea" placeholder="药品适应性"></el-input>
        </el-form-item>
        <el-form-item label="注意事项">
          <el-input v-model="pharmacyInfo.mattersNeedingAttention" type="textarea" placeholder="药品注意事项信息"></el-input>
        </el-form-item>
        <el-form-item>
          <div style="text-align: center;">
            <el-button type="primary" @click="updateSubmit()">提交</el-button>
            <el-button @click="updateFlag = false" type="info" plain>取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      list:[],
      total:0,
      selection:[],
      searchInfo:{
        name:'',
        page:1,
        limit:10,
        properties:'',
      },
      updateFlag:false,
      pharmacyInfo:{
        name:'',
        properties:'',
        usageAndDosage:'',
        drugName:'',
        specialPopulationMedication:'',
        drugInteractions:'',
        adverseReactions:'',
        component:'',
        taboo:'',
        pharmacologicalAction:'',
        adaptability:'',
        mattersNeedingAttention:'',
      },
      isUpdate:false,
    }
  },
  methods:{
    reviewData(){
      this.$confirm("是否恢复数据？").then(res => {
        this.$post("/system/review").then(result => {
          this.initPage();
          return this.$message.success(result.data);
        })
      })
    },
    handleClose(){
      this.pharmacyInfo = {}
    },
    openUpdate(item){
      let abc = this.pharmacyInfo;
      abc.name = item.name; abc.adaptability = item.adaptability; abc.adverseReactions = item.adverseReactions;
      abc.component = item.component; abc.drugInteractions = item.drugInteractions; abc.drugName = item.drugName;
      abc.mattersNeedingAttention = item.mattersNeedingAttention; abc.pharmacologicalAction = item.pharmacologicalAction;
      abc.properties = item.properties; abc.specialPopulationMedication = item.specialPopulationMedication;
      abc.taboo = item.taboo; abc.usageAndDosage = item.usageAndDosage; abc.id = item.id;
      this.updateFlag = this.isUpdate = true;
    },
    currentChange(page){
      this.searchInfo.page = page;
      this.initPage();
    },
    handleSizeChange(limit){
      this.searchInfo.limit = limit;
      this.initPage();
    },
    initPage(){
      console.log(this.searchInfo);
      this.$get("/system/search", this.searchInfo).then(result => {
        if(result.code == 200){
          this.list = result.data.data;
          this.total = result.data.count;
        }else
          this.$message.warning("网路出现错误");
      })
    },
    deleteItem(id){
      let ids = [];
      if(id == null){
         this.selection.forEach(item => ids.push(item.id));
      }else
        ids.push(id);
      if(ids.length == 0) return this.$message.warning("请选择要删除的内容");
      this.$confirm("是否删除这些药品信息？").then(res => {
        this.$del('/system/delete', {ids: ids.toString()}).then(result => {
          if(result.code == 200){
            this.initPage();
            return this.$message.success("删除成功");
          }else
            this.$message.warning("删除失败");
        })
      })
    },
    updateSubmit(){
      if(this.pharmacyInfo.name.length == 0) return this.$message.warning("请输入药品名称");
      this.$post("/system/addOrUpdate", this.pharmacyInfo).then(result => {
         if(result.code == 200){
           this.updateFlag = false;
           this.initPage();
           return this.$message.success(result.data);
         }
         this.$message.warning(result.data);
      })
    }
  },
  created() {
    this.initPage();
  }
};
</script>

<style scoped>
  .show{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }
  .page {
    border-radius: 8px;
    background-color: #fff;
    height: calc(100vh - 105px);
    overflow-y: auto;
    box-sizing: border-box;
  }
</style>
